import React, { Component } from 'react';
import {NavBar , Icon ,Accordion } from 'antd-mobile'
import negative from '../../../../statics/img/negative.svg'
import positive from '../../../../statics/img/positive.svg'

class peoplenews extends Component {
   
    state = {
        pnews: []
    }
    componentDidMount(){
        
        const {news} = this.props.location.state
        
        this.setState({
            pnews : news
        })
        

        
       
    }

    get_attitudeimg = (att)=> {
        switch (att) {
            case '负面':
            return negative
               
            default: return positive
        }
    }

    

    goback = ()=>{
        this.props.history.goBack()
    }
    onclick = (url) =>{
        // window.location.href = url
      }
    render() { 
        console.log(this.state);
        const {pnews} = this.state
        return ( 
        <div style={{height:'calc(100vh - 94px)'}}>
             <NavBar
                mode="dark"
                icon={<Icon type="left" />}
                onLeftClick={this.goback}
               >人物相关新闻
            </NavBar>
            <div style={{height:'calc(100vh - 139px)' ,overflow:'auto'}}>

            
            { pnews.length !== 0 ? 
                pnews.map( item => {
                    return (
                    <div key={item.id} style={{ padding: '0 15px' ,marginTop:'10px' ,border:'1px dotted #78c4d4'}} >
                        <div
                        style={{
                            display:'flex',
                            lineHeight: '50px',
                            color: '#435560',
                            fontSize: 18,
                            borderBottom: '1px solid #F6F6F6',
                        }}
                        >         
                        <div style={{flex:'2'}}>{item.event_class}</div>
                        
                        <div style={{flex:'1',display:'flex',alignItems:'center'}}>
                            <img style={{width:'20px' ,marginRight:'15px' ,marginBottom:'5px'}} src={this.get_attitudeimg(item.sentiment)}/>
                            <div style={{lineHeight:'20px'}}>{item.sentiment}</div>
                            </div>
                        </div>

                        <div  
                            style={{
                            lineHeight: '30px',
                            color: '#888',
                            fontSize: 15,
                            borderBottom: '1px solid #F6F6F6',
                            textIndent: '1.5em'
                        }}>
                              {item.event}

                        </div>
                        
                        <div className="item_content" style={{  display: 'flex' }}>
                        
                        <div style={{  }}>
                            <div style={{ height: '150px', fontWeight: 'bold', marginBottom:'8px', overflow:'auto',textIndent:'1.5em' }}>{item.ky_translation}</div>
                            <div style={{ fontSize:'10px',display:'flex',alignItems:'center'}}><span>来源：{item.website} {item.date}</span><div onClick={()=>this.onclick(item.url)} style={{display:'flex' ,alignItems:'center',fontStyle: 'italic' }} onClick={()=>this.onclick(item.url)}><Icon type="right" />前往源网址</div></div>
                            <div>
                            <Accordion  className="my-accordion" onChange={this.onChange}>
                                <Accordion.Panel header="查看原文">  
                                        {item.translation ? item.translation:'暂无' } 
                                </Accordion.Panel>
                            </Accordion>
                            </div>
                        </div>
                        </div> 
                    </div>
                    )
                })
                
                
                :<div style={{fontStyle: 'italic',textAlign:'center'}}>暂无</div>
            }
            </div>
        </div> );
    }
}
 
export default peoplenews;